# GitHub Copilot - AI 闯关学习小程序项目实战

这是一套以 AI 编程实战为核心的项目教程，基于 Taro + Python FastAPI + LangChain + LangGraph + DeepSeek，用 AI 编程的方式从 0 到 1 开发一个《AI 闯关学习微信小程序》，并且走完部署上线的全流程，带你亲身体验 AI Vibe Coding 的完整工作流，学会用 AI 做出一个能上线、能传播、能变现的小程序产品！

项目代码免费开源：https://github.com/liyupi/yu-ai-learn

完整视频教程 + 文字教程（预计 3 ~ 7 天学完）：https://www.codefather.cn/course/2037104890135748610

![](https://pic.yupi.icu/1/1-project-demo-overview.png)



## 项目介绍

学知识这件事，最大的敌人就是枯燥。看文档、看视频，看着看着就走神了，看完还是记不住。

而人天生喜欢玩游戏，喜欢闯关、答题、拿奖励。既然现在有了 AI，为什么不让 AI 把「我想学的任何知识」自动变成一局闯关游戏呢？

这就是这个项目的起点：用户输入一句话，说出自己想学什么，AI 自动联网搜索最新资料并生成一组闯关题目，用户边答边学，每答一题立刻给出答案和讲解，通关后还能拿到一份 AI 复盘报告。

为什么做成微信小程序，而不是 App 或者网页？因为用户经常在碎片时间里学习小知识，微信小程序免安装、随时随地能打开、依托微信生态的流量入口、还便于分享给朋友一起卷，对一个学习类产品来说几乎是最优形态。

更重要的是，这个项目的骨架可以直接复用到任何垂直领域，换个知识源就是一个新产品，比如驾考宝典、面试题库、企业内部培训考核、职业资格考试复习、英语单词闯关等等。

![](https://pic.yupi.icu/1/2-driving-theory-quiz-flow.png)



## 项目功能演示

1）输入想学的知识，AI 自动出题

在首页的输入框里，用一句话或者一段话描述你想学什么，选择题目难度和数量，点击「开始生成题目」，AI 就会自动去联网搜索相关资料，然后生成一组包含单选、多选、判断三种题型的闯关题目。

![](https://pic.yupi.icu/1/3-vibecoding-web-search-and-correct-answer.png)



2）闯关答题，答完立刻讲解

题目生成后进入闯关页面，顶部有进度条和金币数，每答完一题立刻告诉你对错，并给出这道题的答案解析和对应的知识点，边玩边学。

![](https://pic.yupi.icu/1/4-vibecoding-wrong-answer-and-submit.png)



3）AI 生成通关复盘报告

一组题目答完后，AI 会基于你的答题情况生成一份复盘报告，包含掌握度评分、答错的薄弱知识点、知识总结和下一步学习建议，还会结算本局获得的经验值。

![](https://pic.yupi.icu/1/5-vibecoding-report-and-question-review.png)



4）AI 联网搜索，出的题不过时

大模型的知识有截止日期，如果直接让它出题，很容易出一些过时甚至错误的题目。所以项目给出题环节接入了联网搜索，让 AI 先自主判断要不要搜、搜什么关键词，拿到最新资料后再出题。

这一步本质上是把「出题」从一次简单的大模型调用，升级成了一个会自己上网查资料的 AI Agent。而且做了完整的降级策略，搜索不可用时会自动退回用大模型自身的知识出题，不影响主流程。

![](https://pic.yupi.icu/1/6-yupi-ai-nav-search-and-quiz.png)



5）上传自己的知识库，基于私有文档出题

在「我的」页面可以进入知识库，上传 PDF、Word、Markdown、TXT 格式的文档。系统会自动把文档切成小块、转成向量存进向量数据库，之后就能选择某篇文档来出题，题目完全来自你上传的私有资料。

这个能力让项目从「学公开知识」扩展到了「考自己的资料」，可以用来做企业内部培训考核、特定题库复习、考试冲刺等场景。

![](https://pic.yupi.icu/1/7-knowledge-base-upload-and-quiz.png)



6）AI 给题目配图，学得更直观

生成题目时可以勾选「生成配图」，AI 会根据每道题的知识点生成一张配图。比如刷英语单词时，「苹果的英文是什么」这道题会配上一张苹果的图片，学习体验直观有趣得多。

生成的图片会自动转存到对象存储，拿到永久访问链接，避免 AI 生图接口返回的临时链接过期后图片失效。同时还做了每日额度限制和多题并发控制，兼顾体验和成本。

![](https://pic.yupi.icu/1/8-ai-generated-illustration-quiz.png)



7）微信一键登录，闯关记录随时回看

小程序采用微信静默登录，用户无感授权即可拥有账号，闯关记录、经验值、答题历史全部持久化保存。在「我的」页面可以查看累计经验值和历史闯关列表，点进任意一条还能回看当时的复盘报告。

同时项目做了「可选登录」的设计，没登录也能体验出题和答题，只是不保存记录，最大程度降低了新用户的使用门槛。

![](https://pic.yupi.icu/1/9-profile-and-history.png)



8）真正上线，微信里搜得到

这个项目不是做完就丢在本地，教程会带你把后端 Docker 化部署到容器托管平台、把本地 MySQL 换成云数据库、走完一套小程序发布流程，让任何人都能在微信里搜到并使用你做的小程序。

![](https://pic.yupi.icu/1/image-20260811183313570.png)



## 功能梳理

该项目功能丰富，涵盖闯关答题、AI 出题、复盘报告、用户系统、知识库、AI 配图 6 大模块，30+ 功能点，覆盖了一个真实上线小程序的核心业务场景。

![](https://pic.yupi.icu/1/image-20260811155000927.png)

闯关答题模块：

- 自由输入想学的知识（一句话或一段话）
- 难度自选（简单 / 中等 / 困难 / 混合）
- 题量自选（3 到 10 题）
- 单选、多选、判断三种题型
- 答完即时判分，展示正确答案
- 每题给出解析和对应知识点
- 关卡进度、答对数、金币展示

AI 出题模块：

- DeepSeek 大模型生成题目
- Tavily 联网搜索补充最新知识
- 搜索 Agent 自主决定检索内容
- 提示词约束大模型输出结构化 JSON
- 题目结构解析和字段校验
- 异步任务创建与状态流转
- 前端轮询获取出题进度
- 搜索不可用时自动降级

复盘报告模块：

- AI 生成通关复盘报告
- 掌握度评分和进度条展示
- 薄弱知识点定位
- 三句话知识总结
- 下一步学习建议
- 分享文案生成
- 经验值奖励结算

用户系统模块：

- 微信静默登录（换取 openid）
- JWT 令牌签发与校验
- 可选登录模式（未登录也能体验）
- 个人中心（昵称、头像、经验值）
- 修改个人资料
- 闯关历史列表（分页）
- 闯关详情回看

知识库模块：

- 上传 PDF、Word、Markdown、TXT 文档
- 文档解析并切分成文本块
- 文本块向量化后写入向量数据库
- 按用户隔离的向量集合
- 文档解析状态轮询
- 文档列表和删除
- 文档数量和单文件大小配额
- 基于指定文档做 RAG 出题

AI 配图模块：

- 按题目知识点构建配图提示词
- 调用生图模型生成题目配图
- 图片转存对象存储获取永久链接
- 多题并发生图（信号量控制）
- 每日生图额度限制
- 生图失败不影响出题主流程



## 项目收获

本项目选题新颖，紧跟 AI 编程时代。区别于增删改查的烂大街项目，你将从一个想法开始，实战最主流的 AI 编程方法，上线发布一个真正有人愿意用的产品。

项目内容精炼，不到一周就能学完，快速掌握 AI 编程的核心工作流：需求调研 → 方案设计 → UI 原型 → 前后端开发 → 测试验收 → Bug 修复 → 功能迭代 → 部署上线，让你真正体验企业级 AI 编程的全流程。

从这个项目中你可以学到：

- 如何用 AI 做需求调研和竞品分析，划清 MVP 和扩展功能的边界？
- 如何配置 MCP 和 Agent Skills，充分扩展 AI 编程工具的能力？
- 如何让多个 AI 工具「赛马」产出 UI 原型，做出精美界面？
- 如何用 AI 从 0 开发一个微信小程序，包括跨端框架选型、脚手架初始化、页面开发？
- 如何用 LangChain 编排大模型，让 AI 稳定输出结构化的 JSON 题目数据？
- 如何用 LangGraph 构建 ReAct 智能体，把一次大模型调用升级成会自主联网查资料的 AI Agent？
- 如何从零实现一套 RAG 知识库，包括文档解析、分块、向量化、检索增强出题？
- 如何接入 AI 生图并结合对象存储，把临时图片链接转成永久可用的资源？
- 如何用 OpenSpec 做规范驱动开发，让 AI 在长周期项目里稳定产出？
- 什么是 Harness Engineering？如何给 AI 搭建脚手架？
- 如何把项目 Docker 容器化部署，并走完一整套小程序发布流程？

这个项目特别适合：

- 想学 AI 编程（Vibe Coding），但不知道从哪个项目入手
- 想做一个自己的微信小程序，把想法变成能传播、能变现的产品
- 想系统实战 AI 应用开发核心能力（Agent、RAG、结构化输出、AI 生图）
- 想找一个从需求到上线全流程都完整、能直接当毕设的项目
- 想学 Python 后端和小程序前端，快速补齐全栈能力的同学



## AI 编程开发流程

这个项目遵循最主流的 AI 编程项目开发流程，使用 GitHub Copilot 作为主力 AI 编程工具，搭配 Claude Code 做 UI 原型设计，并通过 OpenSpec 规范驱动开发来管理长周期项目。

第一步，需求分析。先人工做需求分析，明确目标用户、核心痛点和 MVP 边界，再用 Gemini Deep Research 做 AI 需求调研和竞品分析，两者交叉验证后确认需求文档。

第二步，方案设计。让 AI 辅助技术选型，人工审核并修正后确定技术栈（Taro + FastAPI + LangChain），设计出题提示词和结构化输出格式，生成方案设计文档。

第三步，UI 原型。让 Claude Code 和 GitHub Copilot「赛马」，同时产出两套 HTML 原型，结合两套方案的优势深度优化，确定 UI 风格和设计系统，作为后续开发的视觉基准。

第四步，核心功能开发。编写开发提示词让 AI 生成前后端代码，接入 DeepSeek 大模型实现 AI 出题，跑通「输入 → 出题 → 答题 → 报告」核心业务流程。

第五步，持续迭代。逐步完成用户系统、联网搜索 Agent、RAG 知识库、AI 生图等功能模块，每做完一个功能就用 Git 提交代码，上下文太长时新开对话窗口，用 OpenSpec 归档文档让 AI 找回记忆。

第六步，部署上线。Docker 容器化部署到微信云托管，走完小程序发布全流程。

![](https://pic.yupi.icu/1/image-20260811154816415.png)



## 核心业务流程

### 用户使用流程

整个使用流程非常简单：打开小程序 → 输入想学的知识 → 等 AI 出题 → 答题闯关 → 看复盘报告，几分钟完成一次学习闭环。

![](https://pic.yupi.icu/1/01_%E7%94%A8%E6%88%B7%E4%BD%BF%E7%94%A8%E6%B5%81%E7%A8%8B_compressed_v1.png)



### AI 异步出题流程

AI 出题要先联网搜索再让大模型推理，整体耗时可能达到几十秒，而微信小程序的单次请求有超时限制。所以出题接口不直接等结果，而是创建一个后台任务立刻返回任务 ID，由前端轮询获取进度。

![](https://pic.yupi.icu/1/02_AI%E5%BC%82%E6%AD%A5%E5%87%BA%E9%A2%98%E6%B5%81%E7%A8%8B_compressed_v2.png)

搜索或生图环节出现异常时，都不会让整个任务失败。搜索失败就退回用大模型自身知识出题，生图失败就出没有配图的题目，保证核心链路始终可用。



### 知识库 RAG 出题流程

上传文档后，系统会在后台完成解析、分块、向量化，之后就能基于这篇文档出题。检索环节用的是 Agentic RAG，由 AI 自己决定检索什么、检索几次。

![](https://pic.yupi.icu/1/03_%E7%9F%A5%E8%AF%86%E5%BA%93RAG%E5%87%BA%E9%A2%98%E6%B5%81%E7%A8%8B_compressed_v1.png)



## 技术选型

本项目以 Taro 微信小程序 + Python FastAPI + LangChain / LangGraph 为核心，前后端分离，综合运用了多种主流的小程序开发和 AI 应用开发技术。

![](https://pic.yupi.icu/1/image-20260811155041400.png)

小程序前端：Taro 4 跨端框架、React 18 + Hooks、TypeScript、Sass、Taro.request 统一请求封装、微信开发者工具

后端：Python 3.11+、FastAPI Web 框架、Pydantic v2 数据校验、Uvicorn ASGI 服务器、asyncio 异步后台任务、aiomysql 异步连接池、PyJWT 登录令牌、pytest 测试

AI 相关：LangChain AI 应用开发框架、LangGraph ReAct Agent、Tavily 联网搜索 API、Chroma 向量数据库、DeepSeek 大模型、阿里云百炼 Embedding 模型、通义千问生图模型、结构化输出（提示词约束 + JSON 解析 + 模型校验）

数据和存储：MySQL 8、Chroma 本地持久化、腾讯云 COS 对象存储、微信 code2Session 接口、JWT 无状态登录态

部署上线：微信云托管 Docker 容器托管、云数据库 MySQL、小程序服务类目申请、ICP 备案、代码审核与发布上线

AI 编程工具：GitHub Copilot 主力 AI 编程工具（含免费方案）、Claude Code 命令行 AI 编程工具、OpenSpec 规范驱动开发、MCP 插件（Firecrawl 联网搜索、Context7 最新技术文档、Playwright 浏览器自动化）、Agent Skills（前端设计、图片理解）、Harness Engineering、Gemini Deep Research



## 架构设计

本项目采用前后端分离架构。前端是 Taro 编译的微信小程序，后端是 FastAPI 服务，通过 HTTPS 接口通信。

后端内部按照路由层、业务服务层、数据访问层分层，耗时的 AI 任务通过进程内异步任务加数据库状态表来管理，前端轮询获取结果。

检索增强、AI 配图等能力对接了多家外部服务，数据分别落在关系型数据库、向量数据库和对象存储中。

![](https://pic.yupi.icu/1/image-20260811155136853.png)



完整视频教程 + 文字教程（预计 3 ~ 7 天学完）：https://www.codefather.cn/course/2037104890135748610



## 推荐资源

1）鱼皮 AI 导航网站：[AI 资源大全、最新 AI 资讯、免费 AI 教程](https://ai.codefather.cn)

2）编程导航学习圈：[学习路线、编程教程、实战项目、求职宝典、交流答疑](https://www.codefather.cn)

3）程序员面试八股文：[实习/校招/社招高频考点、企业真题解析](https://www.mianshiya.com)

4）程序员写简历神器：[专业模板、丰富例句、直通面试](https://www.laoyujianli.com)

5）1 对 1 模拟面试：[实习/校招/社招面试拿 Offer 必备](https://ai.mianshiya.com)